<!--视频学习-->
<template>
  <div class="videoLearn-page">
    <div class="pck-head">
      <div class="pck-head-item" :class="tabIndex == index ? 'pck-active' : ''" v-for="(item,index) in tablist" @click="tabClick(index)">{{ item }}</div>
    </div>
    <div class="pck-content">
      <TheoreticalVideo v-if="tabIndex == 0"></TheoreticalVideo>
      <PracticalVideo v-if="tabIndex == 1"></PracticalVideo>
    </div>
  </div>
</template>

<script>
import PracticalVideo from "@/components/Video/practicalVideo";
import TheoreticalVideo from "@/components/Video/theoreticalVideo";
import watermark from "@/utils/watermark";
export default {
  name: "videoLearn",
  components: {
    PracticalVideo,
    TheoreticalVideo
  },
  data() {
    return {
      tablist: ['理论视频', '实操视频'],
      tabIndex: 0
    }
  },
  mounted() {
    let userInfo = JSON.parse(localStorage.getItem('userInfo'))
    if (userInfo) {
      watermark.set(userInfo.userName + userInfo.user_id)
    }
  },
  methods: {
    tabClick(e) {
      this.tabIndex = e
    }
  }
}
</script>

<style lang="scss" scoped>
.videoLearn-page {
  width: 100%;
  height: 100%;
}
</style>
